<template>
  <el-container style="height: 100%">
    <el-header style="font-size: 12px">
      <div class="musum_flex">
        <div>
          <img src="../assets/images/art_login.png" />
          <span class="menu_style">博物馆管理系统</span>
        </div>
        <!-- <span>博物馆管理系统</span> -->
        <div class="right-title" style="padding-top: 10px">
          <span style="padding: 0 20px; font-size: 16px">{{ nickName }}</span>
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="signOut()"
                >退出</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-header>
    <el-container class="menu_container">
      <el-menu
        :default-active="this.activeMenu"
        @select="handleSelect"
        :collapse="isCollapse"
        class="el-menu-vertical-demo"
      >
        <el-submenu
          v-for="(pitem, pindex) in this.menuListArray"
          :index="pitem.code + ''"
          :key="pindex"
        >
          <template slot="title">
            <i :class="pitem.icon"></i>
            <span slot="title">{{ pitem.name }}</span>
          </template>
          <router-link
            v-for="(item, index) in pitem.children"
            :key="index"
            :to="{
              path: item.url,
              query: {
                breadcrumbNameP: pitem.name,
                breadcrumbName: item.name,
                breadcrumbPath: item.url,
              },
            }"
          >
            <el-menu-item
              :ref="'breadcrumb' + pindex"
              :data_path="item.url"
              :data_name="item.name"
              :data_pname="pitem.name"
              :data_index="item.code"
              :index="item.code + ''"
              @click="changeBreadcrumb($event)"
            >
              {{ item.name }}
            </el-menu-item>
          </router-link>
        </el-submenu>
      </el-menu>
      <el-main class="el_main_content">
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { signOut, roleTree } from "../api.js";
import { mapState } from "vuex";
export default {
  name: "Index",
  data() {
    return {
      isCollapse: false,
      is_open: false,
      is_close: true,
      menuListArray: [
        {
          name: "内容管理",
          code: "1",
          icon: "el-icon-s-order",
          children: [
            {
              code: "1-1",
              name: "展厅展览",
              url: "/mange/showList",
            },
            {
              code: "1-2",
              name: "馆藏文物",
              url: "/mange/artShowList",
            },
          ],
        },
        {
          name: "预约管理",
          code: "2",
          icon: "el-icon-s-home",
          children: [
            {
              code: "2-1",
              name: "活动预约",
              url: "/mange/orderActiveList",
            },
          ],
        },
        {
          name: "用户管理",
          code: "3",
          icon: "el-icon-s-platform",
          children: [
            {
              code: "3-1",
              name: "用户信息",
              url: "/mange/userList",
            },
          ],
        },
      ],
      // , {
      //             code: '2-2',
      //             name: '参观预约',
      //             url: '/mange/orderVisitList',
      //           }
      // menuListArray: [
      //   {
      //     name: '运单管理',
      //     code: '1',
      //     icon: 'el-icon-s-order',
      //     children: [{
      //       code: '1-1',
      //       name: '运单管理',
      //       url: '/mange/way_mange',
      //     }, {
      //       code: '1-2',
      //       name: '运单池',
      //       url: '/mange/waybill',
      //     }, {
      //       code: '1-3',
      //       name: '任务管理',
      //       url: '/mange/way_task',
      //     }]
      //   },
      //   {
      //     name: '厂房管理',
      //     code: '2',
      //     icon: 'el-icon-s-home',
      //     children: [{
      //       code: '2-1',
      //       name: '报表管理',
      //       url: '/factory/task_list',
      //     }, {
      //       code: '2-2',
      //       name: '司机管理',
      //       url: '/factory/driver',
      //     }]
      //   },
      //   {
      //     name: '运作管理',
      //     code: '3',
      //     icon: 'el-icon-s-platform',
      //     children: [{
      //       code: '3-1',
      //       name: '消息管理',
      //       url: '/runMange/news',
      //     }, {
      //       code: '3-2',
      //       name: '违规管理',
      //       url: '/runMange/violation',
      //     }]
      //   },
      //   {
      //     name: '基础配置',
      //     code: '4',
      //     icon: 'el-icon-s-tools',
      //     children: [{
      //       code: '4-1',
      //       name: '仓库设置',
      //       url: '/basic/information',
      //     }, {
      //       code: '4-2',
      //       name: '账号设置',
      //       url: '/basic/accountNember',
      //     }]
      //   },
      //   {
      //     name: '系统管理',
      //     code: '5',
      //     icon: 'el-icon-menu',
      //     children: [{
      //       code: '5-1',
      //       name: '组织架构',
      //       url: '/system/framework',
      //     }, {
      //       code: '5-2',
      //       name: '账号管理',
      //       url: '/system/number_admin',
      //     }, {
      //       code: '5-3',
      //       name: '角色管理',
      //       url: '/system/role',
      //     }, {
      //       code: '5-4',
      //       name: '菜单管理',
      //       url: '/system/menu',
      //     }]
      //   }]
    };
  },

  mounted() {
    console.log("nickName", this.nickName);
  },
  methods: {
    //退出
    signOut() {
      this.$store.commit("refreshAccessToken", "");
      this.$store.commit("refreshActiveMenu", "");
      this.$store.commit("refreshTagList", []);
      // signOut({}).then(res => {
      //   this.$router.push({
      //     path: '/'
      //   })
      //   if (res.ErrorCode == 0) {
      //     this.$store.commit('refreshAccessToken', '')
      //     this.$store.commit('refreshActiveMenu', '')
      //     this.$store.commit('refreshTagList', [])
      //   } else {
      //     this.$message.error(res.ErrorMsg);
      //   }
      // })
    },
    //页面切换
    changeBreadcrumb(e) {
      this.tags.forEach((item) => {
        item.type = "info";
      });
      var menu_info = e.$attrs;
      var isRender = true;
      var len = this.tags.length;
      for (var i = 0; i < len; i++) {
        if (this.tags[i].path == menu_info.data_path) {
          this.tags[i].type = "danger";
          isRender = false;
          break;
        }
      }
      if (isRender) {
        this.tags.push({
          pname: menu_info.data_pname,
          name: menu_info.data_name,
          path: menu_info.data_path,
          index: menu_info.data_index,
          type: "danger",
        });
      }
      this.$store.commit("refreshTagList", this.tags);
    },
    handleClickTag(tag) {
      this.tags.forEach((item) => {
        item.type = "info";
      });
      tag.type = "danger";
      this.$router
        .push({
          path: tag.path,
          query: {
            breadcrumbNameP: tag.pname,
            breadcrumbName: tag.name,
            breadcrumbPath: tag.path,
          },
        })
        .catch((err) => err);
      this.$store.commit("refreshTagList", this.tags);
      this.$store.commit("refreshActiveMenu", tag.index);
    },
    handleCloseTag(index) {
      var len = this.tags.length;
      var active;
      for (var i = 0; i < len; i++) {
        if (this.tags[i].type == "danger") {
          active = i;
          break;
        }
      }
      if (active != index) {
        this.tags.splice(index, 1);
      } else {
        if (len == 1) {
          this.tags.splice(index, 1);
          this.$router
            .push({
              path: "/index/welcome",
            })
            .catch((err) => err);
          this.$store.commit("refreshActiveMenu", "");
        } else if (len - 1 == index) {
          this.tags.splice(index, 1);
          this.handleClickTag(this.tags[this.tags.length - 1]);
        } else {
          this.tags.splice(index, 1);
          this.handleClickTag(this.tags[index]);
        }
      }
      this.$store.commit("refreshTagList", this.tags);
    },
    handleSelect(key, keyPath) {
      this.$store.commit("refreshActiveMenu", key);
    },
    handleOpen() {
      if (this.isCollapse) {
        this.is_open = true;
        this.is_close = false;
      } else {
        this.is_open = false;
        this.is_close = true;
      }
    },
  },
  computed: {
    ...mapState({
      nickName: (state) => state.nickName,
      activeMenu: (state) => state.activeMenu,
      tags: (state) => state.tagsList,
    }),
  },
};
</script>

<style scoped>
@font-face {
  font-family: "zhenyangb";
  src: url("../assets/zhenyangb.ttf") format("truetype");
}

.musum_flex {
  display: flex;
  justify-content: space-between;
}

.menu_style {
  padding-left: 20px;
  font-size: 26px;
  font-family: "zhenyangb";
  color: #fff;
  margin-top: 10px;
  display: flex;
  align-items: center;
  letter-spacing: 4px;
}

.el-radio-button:first-child:last-child .el-radio-button__inner {
  background-color: rgb(173, 12, 37);
}

.el-header {
  height: 80px !important;
  line-height: 70px;
  background-color: rgb(173, 12, 37);
  color: #fff;
}

.el-header img {
  display: inline-block;
  vertical-align: middle;
  float: left;
  width: 80px;
  height: 68px;
  margin-top: 10px;
}

.right-title {
  display: flex;
  justify-content: right;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100%;
  background-color: rgb(246, 239, 238);
}

.el-dropdown {
  color: #fff;
  font-size: 16px;
}

.el-aside {
  background-color: rgb(246, 239, 238) !important;
}

.header-lang.is-active {
  color: rgb(190, 152, 151);
}

.el-menu-item {
  background-color: rgb(246, 239, 238);
}

.el-menu-item:focus,
.el-menu-item:hover {
  background-color: rgb(190, 152, 151);
}

.el-menu-item.is-active {
  background-color: rgb(173, 12, 37);
  color: #fff;
}

.el-menu {
  border: none;
}

.el-menu a {
  text-decoration: none;
}

.my_open_btn span.el-radio-button__inner {
  border: none !important;
  background-color: rgb(173, 12, 37) !important;
}

.menu_tags {
  width: 100%;
  margin-bottom: 20px;
  white-space: nowrap;
  overflow: auto;
}

.menu_tags .el-tag {
  margin-right: 10px;
  cursor: pointer;
  height: 32px;
  line-height: 30px;
  padding: 0 10px;
}

.menu_tags .el-tag.el-tag--danger {
  background-color: #ad0c25;
  border-color: #ad0c25;
  color: #fff;
}

.menu_tags .el-tag.el-tag--danger >>> .el-tag__close {
  color: #fff;
}

.menu_tags .el-tag.el-tag--danger >>> .el-tag__close:hover {
  background-color: #7b0316;
}

.el_main_content .el-main {
  padding: 0;
}

.el-dialog__footer {
  text-align: center;
}
</style>
